<template>
  <div v-loading="loadingShow">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>创建活动</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet flex-y-top">
        <div class="flex-g-1">
          <el-form ref="form" :model="formData" label-width="180px">
            <el-form-item label="活动名称" :required="true" prop="name">
              <el-input v-model="formData.name" placeholder="请输入活动名称"></el-input>
            </el-form-item>
            <el-form-item label="活动时间" :required="true">
              <el-date-picker v-model="timeData" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['08:00:00', '20:00:00']" @change="getTime"></el-date-picker>
            </el-form-item>
            <el-form-item label="适用门店" :required="true">
              <el-radio-group v-model="formData.storeType" @change="storeTypeChang">
                <el-radio label="1">仅本店可用</el-radio>
                <el-radio label="2">全店通用</el-radio>
                <el-radio label="3">指定门店可用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="选择指定门店" :required="true" v-if="formData.storeType == 3">
              <el-scrollbar>
                <div class="recordBox">
                  <el-table ref="multipleTable" :data="storeArr" tooltip-effect="dark" style="width: 100%">
                    <el-table-column prop="name" label="门店名称"></el-table-column>
                    <el-table-column prop="address" label="门店地址"></el-table-column>
                    <el-table-column label="操作" align="center">
                      <template slot-scope="scope">
                        <div class="textbutton">
                          <el-button size="mini" type="text" @click="delStore(scope.$index)" class>删除</el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-scrollbar>
              <div class="addgoods textbutton">
                <i class="el-icon-plus subjectcolor2"></i>
                <el-button type="text" class @click="addshop">添加门店</el-button>
              </div>
            </el-form-item>
            <el-form-item label="活动规格" :required="true">
              <el-radio-group v-model="formData.limitType" @change="storeTypeChang">
                <el-radio label="1">每单份数</el-radio>
                <el-radio label="2">每日份数</el-radio>
              </el-radio-group>
              <div>
                <el-input size="mini" style="width: 200px;" v-model="formData.limitNum" placeholder="请输入份数"></el-input>
                <span class="mar_l20">单</span>
              </div>
            </el-form-item>
            <el-form-item label="优惠方式" :required="true">
              <div class="time_item">
                <el-radio-group v-model="formData.type">
                  <el-radio label="1">第二件折扣</el-radio>
                  <el-radio label="2">买一赠一</el-radio>
                </el-radio-group>
                <div class="yb_margin lh16">顾客在同一个订单中最多可以购买几份该优惠商品</div>
              </div>
            </el-form-item>
            <el-form-item label="选择活动商品" prop="username">
              <el-table ref="multipleTable" :data="formData.goodsArr" tooltip-effect="dark" style="width: 100%" class="tablecenter">
                <el-table-column prop="name" label="商品">
                  <template slot-scope="scope">
                    <div class="flex">
                      <div class="flex-g-0">
                        <el-image style="width: 60px;height: 60px;border-radius: 10px;" :src="scope.row.icon" fit="cover"></el-image>
                      </div>
                      <div class="flex-g-1 t_l">
                        <div class="mar_l10">{{scope.row.name}}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="原价" align="center"></el-table-column>
                <template v-if="formData.type == 1">
                  <el-table-column prop="money" label="第二份折扣" width="300">
                    <template slot-scope="scope">
                      <div class="kucun" style="display: flex; align-items: center;">
                        <span style="min-width: 60px;">第二件</span>
                        <el-input v-model.number="scope.row.money" max="10" min="1" placeholder="请输入折扣">
                          <template slot="append">折</template>
                        </el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="活动价格">
                    <template slot-scope="scope">
                      <div>{{ scope.row.price * ((scope.row.money ? scope.row.money : 10)/10) }}</div>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column prop="stock" label="库存"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <div class="textbutton">
                      <el-button size="mini" type="text" @click="delGoods(scope.$index)" class>删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="addgoods textbutton">
                <i class="el-icon-plus subjectcolor2"></i>
                <el-button type="text" @click="addgood">添加商品</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-g-0 pad_lr_20">
          <div class="fon_16">常见问题</div>
          <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
            <el-collapse-item title="什么是超级换购？" name="1">
              <div>针对门店用户进行的超级换购活动，用户在下单时可选择超级换购商品活动。</div>
            </el-collapse-item>
            <el-collapse-item title="为什么要做超级换购？" name="2">
              <div>提高新客转化：设置超级换购活动后，可提升新用户下单转化率</div>
            </el-collapse-item>
            <el-collapse-item title="哪些用户可以享受超级换购" name="3">
              <div>可自行设置哪些用户享受该优惠</div>
            </el-collapse-item>
          </el-collapse>
          <div class="fon_16 mar_t20">活动规则</div>
          <div class="color_9 mar_t10 lh30 fon_13">
            <div>1.活动仅限在线支付订单；</div>
            <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submData">{{ this.formData.id ? '立即修改' : '立即创建' }}</el-button>
    </div>
    <!-- 商品库 -->
    <edit ref="edit" @fetchData="tableData"></edit>
    <!-- 门店列表 -->
    <shopEdit ref="ShopEdit" @fetchData="shopListData"></shopEdit>
  </div>
</template>
<script>
import { setGoodsActive, getGoodsActive } from '@/api/good.js';
import Edit from '../plug/components/selectgood';
import shopEdit from '../plug/components/selectshop';

export default {
  components: {
    Edit,
    shopEdit
  },
  data() {
    return {
      loadingShow: false,
      formData: {
        id: '',
        name: '',
        type: '1',
        startTime: '',
        endTime: '',
        storeType: '1',
        storeArr: [],
        limitType: '1',
        limitNum: 0,
        goodsArr: [],
        activityType: 2
      },
      storeArr: [],
      timeData: [new Date(), new Date(new Date().setMonth(new Date().getMonth() + 3))],
      collapseName: ''
    };
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.loadingShow = true;
      this.formData.id = id;
      getGoodsActive({ id: id }).then((res) => {
        if (res.code == 1) {
          this.timeData = [res.data.startTime, res.data.endTime];
          this.storeArr = res.data.storeInfo;
          for (let key in this.formData) {
            this.formData[key] = res.data[key];
          }
          this.loadingShow = false;
        }
      });
    }
  },
  methods: {
    // 选中商品回调
    tableData(msg) {
      this.formData.goodsArr = msg;
    },
    // 打开商品列表
    addgood(id) {
      this.$refs.edit.isSpec('2');
      this.$refs.edit.showEdit(this.formData.goodsArr, 2, this.timeData);
    },
    // 删除商品
    delGoods(msg) {
      this.formData.goodsArr.splice(msg, 1);
    },
    // 获取时间段
    getTime(msg) {
      this.timeData = msg;
    },
    // 适用门店变化时
    storeTypeChang(msg) {
      if (msg != 3) {
        this.formData.storeArr = [];
        this.storeArr = [];
      }
    },
    // 选择指定门店
    addshop(row) {
      this.$refs.ShopEdit.showEdit();
    },
    // 选中门店后的回调
    shopListData(msg) {
      this.formData.storeArr = msg.map((item) => {
        return item.id;
      });
      this.storeArr = msg;
    },
    //删除选中门店
    delStore(index) {
      console.log(index);
      this.formData.storeArr.splice(index, 1);
      this.storeArr.splice(index, 1);
    },
    // 提交表单
    submData() {
      this.formData.startTime = this.$moment(this.timeData[0]).format('YYYY-MM-DD HH:mm:ss');
      this.formData.endTime = this.$moment(this.timeData[1]).format('YYYY-MM-DD HH:mm:ss');
      setGoodsActive(this.formData).then((res) => {
        if (res.code == 1) {
          this.$baseMessage(this.formData.id ? '修改成功！' : '保存成功！', 'success');
          history.back();
        }
      });
    }
  }
};
</script>
<style lang="scss">
.time_item .el-input {
  width: 180px;
}

.kucun .el-input {
  width: 200px;
}
</style>
